<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/datatables.min.css" />
    <title>惩罚表</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="js/datatables.min.js"></script>

    <style>
        html,
        body {
            width: 100%
        }

        td,
        th {
            white-space: nowrap;
        }

        table thead tr .txt-center {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
        }

        header {
            text-align: center;
        }

        header p {
            max-width: 1140px;
            text-align: left;
            font-size: 24px;
            margin: auto;
            margin-top: 100px;
        }

        .container {
            display: felx;
            justify-content: center;
        }
    </style>
    <script>
        $(document).ready(function () {

            var table = $('#info-table').DataTable({
                sort: false,
                paging: false,
                searching: false,
                destroy: true,
                info: false,
                responsive: true,
                autoFill: true,
                colReorder: true,
                buttons: ['copy', 'excel', 'pdf']

            });


        });
    </script>
</head>

<body>
    <div class="wrap">
        <header>
            <h1>请按照提示，按步骤设置绩效考核标准的标准</h1>

            <p>1. 请勾选编辑人员的考核分项，及以下哪些因素会影响到编辑的考核标准？</p>
        </header>
        <div class="container">
            <table id="info-table" class="table table-hover table-striped table-bordered" style="width:100px;">
                <thead>
                    <tr>
                        <th colspan="7">奖励指标</th>
                    </tr>
                    <tr>
                        <th>政治/谣言/低俗</th>
                        <th>封号/违规</th>
                        <th>抄袭</th>
                        <th>删文</th>
                        <th>内容错误</th>
                        <th>点赞奖励</th>
                        <th>未按时发文</th>
                    </tr>
                    <tr>
                        <th>元/次</th>
                        <th>元/次</th>
                        <th>元/次</th>
                        <th>元/次</th>
                        <th>元/次</th>
                        <th>元/次</th>
                        <th>元/次</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                    </tr>
                    <tr>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                        <td>test</td>
                    </tr>

                </tbody>
            </table>
        </div>
    </div>
</body>
<script>
    $('th').addClass('txt-center')
    // $('tr th:first-child').addClass('bg-primary')
    // $('tr td:first-child').addClass('bg-info')
</script>

</html>